<template>
  <div class="project">
    <div class="year">
      <span>年份：</span>
      <div v-for="(item, index) in yearList" :key="index">
        <div
          class="year-item"
          :class="{
            active: currentYear === index
            // disabled:
            //   isView && yearList[index] > todayYear
          }"
          @click="clickYear(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <el-form
      :model="basicForm"
      label-position="top"
      :rules="basicRules"
      ref="basicFormRef"
    >
      <div
        v-for="(item, index) of basicForm.yearInfo"
        :key="index"
        v-show="
          parseInt(yearList[currentYear]) ===
          parseInt(item.year)
        "
      >
        <!-- 年度信息 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            年度信息
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="上年底累计投资"
                  :prop="
                    'yearInfo.' +
                    index +
                    '.lastYearInvestment'
                  "
                >
                  <el-input
                    v-model="item.lastYearInvestment"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="本年度计划投资"
                  :prop="
                    'yearInfo.' + index + '.planInvestment'
                  "
                >
                  <el-input
                    v-model="item.planInvestment"
                    :disabled="isDetail"
                    @change="
                      (val) =>
                        handleChangePlanInvestment(
                          val,
                          index
                        )
                    "
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="政府投资批次"
                  :prop="
                    'yearInfo.' +
                    index +
                    '.governInvestment'
                  "
                >
                  <el-select
                    placeholder=""
                    v-model="item.governInvestment"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in batchOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="年度目标"
                  :prop="'yearInfo.' + index + '.yearPlan'"
                >
                  <el-input
                    v-model="item.yearPlan"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="本年度计划形象进度"
                  :prop="
                    'yearInfo.' + index + '.planProcess'
                  "
                >
                  <el-input
                    type="textarea"
                    v-model="item.planProcess"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="是否区重点项目"
                  :prop="'yearInfo.' + index + '.zoneFocus'"
                >
                  <el-select
                    placeholder=""
                    v-model="item.zoneFocus"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in ynOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="是否市重点项目"
                  :prop="'yearInfo.' + index + '.cityFocus'"
                >
                  <el-select
                    placeholder=""
                    v-model="item.cityFocus"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in ynOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="是否市省重点项目"
                  :prop="
                    'yearInfo.' + index + '.provinceFocus'
                  "
                >
                  <el-select
                    placeholder=""
                    v-model="item.provinceFocus"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in ynOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 资金来源 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            资金来源
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="区财政"
                  :prop="
                    'yearInfo.' + index + '.zoneFinance'
                  "
                >
                  <el-input
                    v-model="item.zoneFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="街道财政"
                  :prop="
                    'yearInfo.' + index + '.streetFinance'
                  "
                >
                  <el-input
                    v-model="item.streetFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="上级资金"
                  :prop="
                    'yearInfo.' + index + '.parentFinance'
                  "
                >
                  <el-input
                    v-model="item.parentFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="其他融资"
                  :prop="
                    'yearInfo.' + index + '.otherMixFinance'
                  "
                >
                  <el-input
                    v-model="item.otherMixFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="BOT资金"
                  :prop="
                    'yearInfo.' + index + '.botFinance'
                  "
                >
                  <el-input
                    v-model="item.botFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="PPT资金"
                  :prop="
                    'yearInfo.' + index + '.docFinance'
                  "
                >
                  <el-input
                    v-model="item.docFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="贷款"
                  :prop="'yearInfo.' + index + '.loans'"
                >
                  <el-input
                    v-model="item.loans"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="融建"
                  :prop="
                    'yearInfo.' + index + '.mixFinance'
                  "
                >
                  <el-input
                    v-model="item.mixFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="其他资金"
                  :prop="
                    'yearInfo.' + index + '.otherFinance'
                  "
                >
                  <el-input
                    v-model="item.otherFinance"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDictOptions } from '@/utils/dict'

export default {
  props: {
    yearList: Array,
    isDetail: Boolean,
    detailInfo: Array
  },
  data() {
    return {
      currentYear: 0,
      basicForm: { yearInfo: [] },
      basicRules: {
        useArea: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入最多两位小数的正数',
            trigger: 'blur'
          }
        ]
      },
      batchOptions: [],
      ynOptions: [
        {
          dictValue: '是',
          dictText: '是'
        },
        {
          dictValue: '否',
          dictText: '否'
        }
      ]
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  watch: {
    yearList(val, oldVal) {
      if (val.length) {
        if (this.basicForm.yearInfo.length === 0) {
          this.basicForm.yearInfo = val.map((item) => {
            return {
              pkid: '',
              year: item,
              lastYearInvestment: '',
              planInvestment: '',
              governInvestment: '',
              yearPlan: '',
              planProcess: '',
              zoneFocus: '是',
              cityFocus: '否',
              provinceFocus: '否',
              zoneFinance: '',
              streetFinance: '',
              parentFinance: '',
              otherMixFinance: '',
              botFinance: '',
              docFinance: '',
              loans: '',
              mixFinance: '',
              otherFinance: ''
            }
          })
        } else {
          const oldYearInfo = JSON.parse(
            JSON.stringify(this.basicForm.yearInfo)
          )
          this.basicForm.yearInfo = []
          val.forEach((item) => {
            const oldVal = oldYearInfo.find(
              (info) => info.year === parseInt(item)
            )
            const oldVal1 = this.detailInfo.find(
              (info) => info.year === parseInt(item)
            )
            if (oldVal) {
              this.basicForm.yearInfo.push(oldVal)
            } else if (oldVal1) {
              this.basicForm.yearInfo.push(oldVal1)
            } else {
              this.basicForm.yearInfo.push({
                pkid: '',
                year: item,
                lastYearInvestment: '',
                planInvestment: '',
                governInvestment: '',
                yearPlan: '',
                planProcess: '',
                zoneFocus: '是',
                cityFocus: '否',
                provinceFocus: '否',
                zoneFinance: '',
                streetFinance: '',
                parentFinance: '',
                otherMixFinance: '',
                botFinance: '',
                docFinance: '',
                loans: '',
                mixFinance: '',
                otherFinance: ''
              })
            }
          })
        }
      }
    },
    detailInfo(val) {
      // if (val.length > 0) {
      this.basicForm.yearInfo = Object.assign(
        [],
        this.detailInfo
      )
      // }
    }
  },
  mounted() {
    this.initOptions()
  },
  methods: {
    async initOptions() {
      const data = await getDictOptions('zhcy_pc')
      this.batchOptions = data
    },
    clickYear(index) {
      // if (
      //   this.isView &&
      //   this.yearList[index] > this.todayYear
      // ) {
      //   this.$message.warning('不可查看未到年份')
      //   return
      // }
      this.currentYear = index
    },
    handleChangePlanInvestment(val, index) {
      this.$emit(
        'changeYearPlanInvestment',
        this.yearList[index],
        val || 0
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.project {
  flex: 1 1 auto;
  overflow: auto;

  &-part {
    margin-top: 10px;

    &-title {
      color: #4c565c;
      line-height: 18px;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 24px;
      position: relative;
      box-sizing: border-box;
      padding: 0 0 0 11px;
      line-height: 16px;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &-title1 {
      margin-left: 10px;
    }

    &-content {
      padding-left: 10px;
      &-title {
        font-size: 16px;
        font-weight: 500;
        color: #4c565c;
        line-height: 16px;
        position: relative;
        padding-left: 15px;
        margin-bottom: 16px;
        &::before {
          position: absolute;
          content: ' ';
          width: 7px;
          height: 7px;
          background: #87ebf7;
          border-radius: 50%;
          top: 5px;
          left: 0;
        }
      }
    }
  }
}

::v-deep {
  .el-form-item__label {
    line-height: 14px !important;
  }

  .el-form-item__content {
    line-height: auto !important;
  }

  .el-input-group__append {
    height: 24px !important;
    border-left: 1px solid #dcdfe6 !important;
    text-align: center !important;
    line-height: 24px !important;
  }

  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 20px;
    line-height: 20px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }

    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }

      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    width: 320px !important;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }

  .el-date-editor.el-input {
    width: auto !important;
  }
}

.year,
.month {
  display: flex;
  margin: 0 0 20px 10px;
  font-size: 14px;
  line-height: 28px;

  &-item {
    width: 66px;
    height: 28px;
    background: #f6f9fc;
    border: 1px solid #ebf1f8;
    margin-right: 15px;
    text-align: center;
    cursor: pointer;
    line-height: 28px;
    font-size: 14px;

    &.active {
      color: #00baff;
      border: 1px solid #00baff;
    }
    &.disabled {
      background: #e8eff7;
      color: #000000ba;
    }
  }
}
</style>
